/*
 * @Author: nainaiyi s15037075861@163.com
 * @Date: 2022-07-12 14:32:27
 * @LastEditors: nainaiyi s15037075861@163.com
 * @LastEditTime: 2022-09-05 16:02:57
 * @FilePath: \网站2001A尚盈盈7.12月考\demo\src\pages\shop\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState } from 'react'
import { RootState } from '../../store';
import { shopListType } from '../../store/shop/shopReducer';
import { useDispatch, useSelector } from "react-redux"
import { fetchCountAction, fetchIsCheckedAction, fetchAllCheckedAction } from '../../store/shop/shopAction';
import { SubmitBar, Checkbox, ProductCard, Stepper } from 'react-vant';
import { UserShop } from '../../store/hook';


const Shop: React.FC = () => {
    const dispatch = useDispatch()
    const { allPrice, allChecked } = UserShop()
    const shopList = useSelector((state: RootState) => state.shopReducer.shopList)
    const changeCount = (count: number | null, v: shopListType) => {
        dispatch(fetchCountAction(count!, v.id))
    }
    const changeChange = (isChecked: boolean, id: string) => {
        dispatch(fetchIsCheckedAction(isChecked, id))
    }
    return (
        <div>
            <div>
                {
                    shopList.map((v, i) => {
                        return (
                            <div key={i} style={{ display: "flex" }}>
                                <Checkbox checked={v.isChecked} style={{ padding: 5 }} onChange={val => changeChange(val, v.id)}>
                                </Checkbox>
                                <ProductCard
                                    num={<Stepper
                                        min={1}
                                        value={v.count}
                                        onChange={(value) => {
                                            changeCount(value, v)
                                        }}
                                    />}
                                    price={v.price}
                                    desc={v.desc}
                                    title={v.title}
                                    thumb={v.url}
                                />
                            </div>
                        )
                    })
                }
            </div>
            <div className="demo-submit-bar">
                <SubmitBar
                    price={allPrice * 100}
                    buttonText="提交订单"
                >
                    {/* 全选 */}
                    <Checkbox
                        checked={allChecked}
                        onChange={(checked) => { dispatch(fetchAllCheckedAction(checked)) }}
                    >全选</Checkbox>
                </SubmitBar>
            </div>
        </div>
    )
}

export default Shop